<template>
  <div class="layout-header-wrapper">
    <div class="flex align-center">
      <div class="logo-wrapper">
        <img class="logo" src="@/assets/logo.png" alt="" />
        <span class="DingTalk">DIY在线设计平台</span>
      </div>

      <a-tooltip>
        <a-switch v-model:checked="store.showGrid" checked-children="标尺"> </a-switch>
      </a-tooltip>

      <History
        class="margin-left-sm"
        v-model="store.previewData"
        :before-update="() => store.setCurComponent(null)"
        @on-change="handleHistoryChange"
      ></History>
    </div>
    <div>
      <a-button type="link" class="btn" @click="store.clearComponent()"> 清除 </a-button>
      <a-button type="link" class="btn" @click="handlePreview"> 预览 </a-button>
      <a-button type="link" class="btn" @click="store.exportAsHtmlFile"> 导出html文件 </a-button>
      <a-button class="btn primary" type="primary" @click="handleSave">保存</a-button>
    </div>

    <!--预览-->
    <CommonModal v-model="visible" @on-close="store.isEdit = true">
      <div v-html="code" />
    </CommonModal>
  </div>
</template>

<script setup lang="ts">
import { useCertStore } from '@/stores'
import { nextTick, ref } from 'vue'
import CommonModal from '@/components/CommonModal/index.vue'
import History from '@/components/History/index.vue'
import { CertVariable } from '@/diy/variable/cert'

const store = useCertStore()

//预览
const code = ref<string>('')
const visible = ref<boolean>(false)
const handlePreview = async () => {
  code.value = await store.getHtmlCode(true, CertVariable)
  visible.value = true
}
const handleSave = () => {}

//改变历史
const handleHistoryChange = () => {
  nextTick(() => {
    store.canvasControl?.update()
  })
}
</script>

<style scoped>
.layout-header-wrapper {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;

  .logo-wrapper {
    display: flex;
    align-items: center;
    width: 230px;
    font-size: 16px;

    img {
      height: 24px;
      margin-right: 12px;
    }
  }

  .fullscreen {
    display: flex;
    align-items: center;
    font-size: 20px;
    color: #6c7387;
  }

  .btn {
    font-size: 13px;
    height: 30px;
    color: #333;
    &.primary {
      color: #fff !important;
    }

    &:hover {
      color: #1677ff;
    }
  }
}
</style>
